import React, { useState } from 'react'
import './index_css/index.scss'
import { Calendar, Tanclb, Footer, HootFloor, Banner, ArrowTabs, Search, ContentSwiper } from '@/utils/components'
// 轮播图下方 左右滚动栏图片
import { bannerBottom, BannerView } from '@/stoer/index'
import Ad from '@/component/Homes/Main/Index/Ad/Ad'//右侧客服
// 搜索框下导航数据
const NavList = ['邀请函', '儿童节', '端午节', '招聘', '芒种', '端午节放假通知', '六一儿童节邀请函']


function Index() {

  //鼠标划过显示加隐藏
  const [hovered, setHovered] = useState(false);

  return (
    <div className='mall-page'>
      {/* 搜索栏  */}
      <div className='header-content'>
        {/* 左侧图片 */}
        <div className='search-left'><img src="https://asset.eqh5.com/e65f07d79d944773bc9d5d44bfa3da58.png?imageMogr2/quality/80/format/webp/" alt="" /></div>

        {/* 搜索框 */}
        <div className='mall-search-box'>

          <div className='mall-search-input'>
            <Search></Search>
          </div>

          {/* 搜索框下导航 */}
          <div className='mall-search-recommend'>
            {
              NavList.map((item => <div key={item} >{item}</div>))
            }
          </div>
        </div>

        {/* 右侧日历 */}
        <div className='market-calendar'>
          <Calendar></Calendar>
        </div>
      </div>

      {/* banner 轮播图 */}
      <div className='banner-container'>
        <div className='swiper-banner'>
          <div className='mall-insite-banner'>
            <Banner></Banner>
          </div>

          {/* 轮播图下方 左右滚动栏 */}
          <div className='banner-area'>
            <ArrowTabs DataListLength={bannerBottom.length} DomWidth={210}>
              {bannerBottom.map((item, index) => {
                return (
                  <div key={index} className="tabsbox">
                    <img src={item} alt="" className="jump-image" />
                  </div>
                );
              })}
            </ArrowTabs>
          </div>
        </div>
      </div>

      {/* 首页各种模板 */}
      <HootFloor Listlength={BannerView.length}>
        {
          BannerView.map((item, index) => {
            return (
              <ContentSwiper item={item} key={index}></ContentSwiper>
            )
          })
        }
      </HootFloor>


      {/* 广告  */}
      <div className='banner-bar'>
        <img style={{ width: '100%', height: '100%' }} src="https://asset.eqh5.com/719b855a25d34394aca8ffe56bdad2db.jpg?imageMogr2/quality/80/format/webp/" alt="" />
      </div>


      {/* 内容循环 HootFloor今日推荐大盒子 SwiperCart里面的每个小盒子样式  SwiperIndex核心轮播功能*/}
      {/* {
        BannerView.map((item, index) => {
          return (
            <ContentSwiper item={item} key={index}></ContentSwiper>
          )
        })
      } */}


      <Ad></Ad>

      {/* 底部  */}
      <Footer></Footer>
    </div>

  )
}

export default Index
